<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <script src="js/vue.js"> </script>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1574448_vfkj146as1r.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2.16/lib/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vant@2.2.16/lib/vant.min.js"></script>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div id="container">
        <!--这是一个搜索框（head）的 start-->
        <div class="head">
            <div class="dropdown">
                <van-dropdown-menu>
                    <van-dropdown-item v-model="value1" :options="option" />
                </van-dropdown-menu>
            </div>
            <div class="search">
                <van-search v-model="value" placeholder="目的地|酒店|景点|关键字" show-action shape="round" @search="onSearch">
                    <div slot="action" @click="onSearch">搜索</div>
                </van-search>
            </div>
        </div>
        <!--这是一个搜索框（head）的 end-->

        <!--这是一个的轮播图（swipe）的 start-->
        <div class="swipe">
            <van-swipe :autoplay="3000" indicator-color="white">
                <van-swipe-item>
                    <img src="http://pic4.40017.cn/index/slide/2017/03/21/14/jLvNMj.jpg.webp" alt="">
                    <span>福州</span>
                    <p>世界是一本书，从这里开始读</p>
                </van-swipe-item>
                <van-swipe-item>
                    <img src="http://pic4.40017.cn/index/slide/2017/03/21/11/86PQJh.jpg.webp" alt="">
                    <span>泉州</span>
                    <p>一生值得去的国内目的地之一</p>
                </van-swipe-item>
                <van-swipe-item>
                    <img src="http://pic4.40017.cn/index/slide/2017/03/21/14/I6be2r.jpg.webp" alt="">
                    <span>珠海</span>
                    <p>快乐大巴游，省心省钱省力</p>
                </van-swipe-item>
                <van-swipe-item>
                    <img src="http://pic4.40017.cn/index/slide/2017/03/21/14/IwN3NW.jpg.webp" alt="">
                    <span>厦门</span>
                    <p>经典游轮航线，超值特惠</p>
                </van-swipe-item>
            </van-swipe>
        </div>
        <!--这是一个的轮播图（swipe）的 end-->

        <!--这是一个的导航（tab-box）的 start-->
        <div class="tab-box">
            <ul>
                <li>
                    <span class="iconfont icon-train"></span>
                    <p>火车票</p>
                </li>
                <li>
                    <span class="iconfont icon-planec"></span>
                    <p>机票</p>
                </li>
                <li>
                    <span class="iconfont icon-scenic"></span>
                    <p>景点门票</p>
                </li>
                <li>
                    <span class="iconfont icon-hotel"></span>
                    <p>酒店住宿</p>
                </li>
            </ul>
        </div>
        <!--这是一个的导航（tab-box）的 end-->

        <!--这是一个功能（feature）的 start-->
        <div class="feature">
            <ul>
                <li>
                    <span class="iconfont icon-car"></span>
                    <p>汽车票-船票</p>
                </li>
                <li>
                    <span class="iconfont icon-sun"></span>
                    <p>周边自由行</p>
                </li>
                <li>
                    <span class="iconfont icon-flag"></span>
                    <p>周边跟团游</p>
                </li>
                <li>
                    <span class="iconfont icon-travel"></span>
                    <p>境内游</p>
                </li>
                <li>
                    <span class="iconfont icon-cruiser"></span>
                    <p>邮轮</p>
                </li>
                <li>
                    <span class="iconfont icon-tree"></span>
                    <p>出境游</p>
                </li>
                <li>
                    <span class="iconfont icon-running"></span>
                    <p>海外游乐</p>
                </li>
                <li>
                    <span class="iconfont icon-visa"></span>
                    <p>签证</p>
                </li>
                <li>
                    <span class="iconfont icon-wifi"></span>
                    <p>全球wifi</p>
                </li>
                <li>
                    <span class="iconfont icon-all"></span>
                    <p>全部</p>
                </li>
            </ul>
        </div>
        <!--这是一个功能（feature）的 start-->

        <!--这是一个热门推荐（hot-module）的 start-->
        <div class="hot-module">
            <h2>
                <span class="iconfont icon-fire"></span>
                热门推荐
            </h2>
            <div class="text">
                <ul>
                    <li>
                        <span>曼谷</span>
                    </li>
                    <li>
                        <span>巴黎</span>
                    </li>
                    <li>
                        <span>冲绳</span>
                    </li>
                    <li>
                        <span>富士山</span>
                    </li>
                </ul>
            </div>
            <div class="module">
                <ul>
                    <li>
                        <img src="http://pic4.40017.cn/poi/2017/03/16/16/wony5c_300x200_00.jpg" alt="">
                        <span>今年最火的10大古镇</span>
                    </li>
                    <li>
                        <img src="http://pic5.40017.cn/01/000/07/9e/rBLkBlnoZ5CAd5s8AAGoaencbUU275_300x200_00.jpg"
                            alt="">
                        <span>适合秋冬出游的海岛</span>
                    </li>
                    <li>
                        <img src="http://pic5.40017.cn/01/001/04/14/rBLkBVnnEiaADQysAAD4v4j0QKY062_300x200_00.jpg"
                            alt="">
                        <span>中国8大经典自驾游</span>
                    </li>
                    <li>
                        <img src="http://pic4.40017.cn/poi/2016/09/28/20/jfN5UH_300x200_00.jpg" alt="">
                        <span>12月旅行目的地推荐</span>
                    </li>
                </ul>
                <p>查看更多玩法</p>
            </div>
        </div>

        <!--这是一个热门推荐（hot-module）的 end-->

        <!--这是一个底部导航（tab-bar）的 start-->
        <div class="tab-bar">
            <ul>
                <li>
                    <span class="iconfont icon-home"  v-on:click="openindex" v-bind:style="{'color':'red'}"></span>
                    <p v-bind:style="{'color':'red'}">首页</p>
                </li>
                <li>
                    <span class="iconfont icon-order"></span>
                    <p>订单</p>
                </li>
                <li>
                    <span class="iconfont icon-destination" v-on:click="openscenic"></span>
                    <p>附近</p>
                </li>
                <li>
                    <span class="iconfont icon-my" v-on:click="openPersonpage"></span>
                    <p>我的</p>
                </li>
            </ul>
        </div>
        <!--这是一个底部导航（tab-bar）的 end-->
    </div>
    <script>
        var vm = new Vue({
            el: "#container",
            
            data: {
                value: "",
                value1: 0,
                color:false,
                option: [
                    { text: '泉州', value: 0 },
                    { text: '福州', value: 1 },
                    { text: '厦门', value: 2 }
                ],
            },
            methods: {
                onSearch: function () { },
                openindex:function(){
                    window.location.href="index.html";
                },
                openscenic:function(){
                    window.location.href="html/scenic.html";
                },
                openPersonpage:function(){
                window.location.href="html/personpage.html";
            }
            },
        })
    </script>
</body>
</html>